<template>
	<view class="dashboard-sale-container">
		<view class="header-class tn-flex justify-start">
			<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>
			<tn-navbar fixed back-text="返回">销售情况</tn-navbar>
		</view>

		<view class="tn-p tn-white_bg">
			<!-- 日销售情况 -->
			<view class="tn-py-md">
				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
					<view class="indicator"></view>
					日销售情况
				</view>
				<view class="cards-grid">
					<view class="card-item">
						<text class="card-title">今日销售额</text>
						<text class="card-value blue-text">12.5万</text>
					</view>
					<view class="card-item">
						<text class="card-title">今日订单数</text>
						<text class="card-value blue-text">156</text>
					</view>
					<view class="card-item">
						<text class="card-title">客单价</text>
						<text class="card-value blue-text">801元</text>
					</view>
					<view class="card-item">
						<text class="card-title">同比增长</text>
						<text class="card-value green-text">+15.8%</text>
					</view>
				</view>
			</view>

			<!-- 月销售指标 -->
			<view class="tn-py-md">
				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
					<view class="indicator"></view>
					月销售指标
				</view>
				<view class="progress-cards">
					<view class="progress-card">
						<view class="progress-header">
							<text class="progress-title">月度目标</text>
							<text class="progress-value">350万</text>
						</view>
						<view class="progress-bar">
							<view class="progress-inner" style="width: 75%;"></view>
						</view>
						<view class="progress-footer">
							<text>已完成：262.5万</text>
							<text>完成率：75%</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 季度销售指标 -->
			<view class="tn-py-md">
				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
					<view class="indicator"></view>
					季度销售指标
				</view>
				<view class="progress-cards">
					<view class="progress-card">
						<view class="progress-header">
							<text class="progress-title">季度目标</text>
							<text class="progress-value">1000万</text>
						</view>
						<view class="progress-bar">
							<view class="progress-inner" style="width: 65%;"></view>
						</view>
						<view class="progress-footer">
							<text>已完成：650万</text>
							<text>完成率：65%</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 当日销售排行榜 -->
			<view class="tn-py-md">
				<view class="section-title tn-text-bold tn-text-xl tn-mb-sm">
					<view class="indicator"></view>
					当日销售排行榜
				</view>
				<view class="ranking-list">
					<view class="ranking-item" v-for="(item, index) in rankingData" :key="index">
						<view class="ranking-number" :class="{'top-three': index < 3}">{{index + 1}}</view>
						<view class="ranking-info">
							<text class="ranking-name">{{item.name}}</text>
							<text class="ranking-value">{{item.value}}万元</text>
						</view>
						<view class="ranking-bar">
							<view class="ranking-progress" :style="{width: item.percentage + '%'}"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const rankingData = ref([
		{ name: '员工A', value: 5, percentage: 100 },
		{ name: '员工B', value: 3, percentage: 88 },
		{ name: '员工C', value: 2, percentage: 72 },
		{ name: '员工D', value: 1.8, percentage: 60 },
		{ name: '员工E', value: 0.7, percentage: 48 }
	])
</script>

<style scoped>
	.dashboard-sale-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header-class {
		background-color: #fff;
		height: 45px;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #435A88;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		padding-left: 10px;
	}

	.indicator {
		width: 5px;
		height: 20px;
		background-color: #4CAF50;
		margin-right: 10px;
		border-radius: 2px;
	}

	.cards-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 0 10px;
	}

	.card-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.card-title {
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}

	.card-value {
		font-size: 18px;
		font-weight: bold;
	}

	.green-text {
		color: #4CAF50;
	}

	.blue-text {
		color: #2196F3;
	}

	.progress-cards {
		padding: 0 10px;
	}

	.progress-card {
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.progress-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.progress-title {
		font-size: 14px;
		color: #666;
	}

	.progress-value {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.progress-bar {
		height: 8px;
		background-color: #f5f5f5;
		border-radius: 4px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.progress-inner {
		height: 100%;
		background-color: #4CAF50;
		border-radius: 4px;
		transition: width 0.5s ease-in-out;
	}

	.progress-footer {
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		color: #999;
	}

	.ranking-list {
		padding: 0 10px;
	}

	.ranking-item {
		background-color: #fff;
		border-radius: 8px;
		padding: 12px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.ranking-number {
		width: 24px;
		height: 24px;
		border-radius: 12px;
		background-color: #f5f5f5;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		margin-right: 10px;
	}

	.ranking-number.top-three {
		background-color: #4CAF50;
		color: #fff;
	}

	.ranking-info {
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-right: 10px;
	}

	.ranking-name {
		font-size: 14px;
		color: #333;
	}

	.ranking-value {
		font-size: 14px;
		color: #666;
	}

	.ranking-bar {
		width: 100px;
		height: 6px;
		background-color: #f5f5f5;
		border-radius: 3px;
		overflow: hidden;
	}

	.ranking-progress {
		height: 100%;
		background-color: #4CAF50;
		border-radius: 3px;
		transition: width 0.5s ease-in-out;
	}
</style> 